<script setup>
import { computed } from 'vue';

    const emits = defineEmits()
    const props = defineProps({
        todoList:{
            type:Array,
            default:() => {}
        }
    })

    const residue = computed(() => {
        return props.todoList.filter((item) =>  !item.finished).length
    })

    const clear = () => {
        emits('clearCompleted')
    }
</script>
<template>
  <footer class="footer">
    <span class="todo-count">
      <strong>{{ residue }}</strong> item left
    </span>
    <ul class="filters">
      <li>
        <a href="#/" class="selected">All</a>
      </li>
      <li>
        <a href="#/active">Active</a>
      </li>
      <li>
        <a href="#/completed">Completed</a>
      </li>
    </ul>
    <button class="clear-completed" @click="clear">
      Clear completed
    </button>
  </footer>
</template>